<template>
    <el-row :gutter="0">
        <el-col :span="24" style="margin-top:10px;" v-if="path.produces && path.produces.length > 0">
            <i class="el-icon-info"></i> <span style="line-height: 28px; font-weight: bold;">Response Content-Type：</span>
            <span>{{path.produces.join(' | ')}}</span>
        </el-col>
        <el-col :span="24" v-if="path.responses !== undefined && path.responses !== null && path.responses.length > 0" style="margin-top:5px;">
            <i class="el-icon-s-grid"></i> <span style="line-height: 28px; font-weight: bold;">Response Status：</span>
        </el-col>
        <el-col :span="24" v-if="path.responses !== undefined && path.responses !== null && path.responses.length > 0" style="margin-top:5px;">
            <el-table :data="path.responses" size="mini" :row-key="rowKey" :expand-row-keys="path.expandResponses" :row-class-name="expandClass">
                <el-table-column label="HttpStatus" prop="name"></el-table-column>
                <el-table-column label="Description" prop="description"></el-table-column>
                <el-table-column label="DataType" :formatter="formatDataType"></el-table-column>
                <el-table-column label="Headers" prop="headers"></el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props" v-if="path.expandResponses.indexOf(props.row.name) >= 0">
                        <el-row :gutter="20" v-if="path.errorCodes !== undefined && path.errorCodes !== null && path.errorCodes.length > 0">
                            <el-col :span="8">Model：</el-col>
                            <el-col :span="8">Example：</el-col>
                            <el-col :span="8">Error Codes：</el-col>
                            <el-col :span="8">
                                <el-input type="textarea" :autosize="{ maxRows: 10 }" :value="getModel(props.row.schema)"></el-input>
                            </el-col>
                            <el-col :span="8">
                                <el-input type="textarea" :autosize="{ maxRows: 10 }" :value="getExample(props.row.schema, path['x-response-example'])"></el-input>
                            </el-col>
                            <el-col :span="8" v-if="path.errorCodes !== undefined && path.errorCodes !== null && path.errorCodes.length > 0">
                                <el-table :data="path.errorCodes" size="mini">
                                    <el-table-column label="code" prop="code" width="80"></el-table-column>
                                    <el-table-column label="description" prop="description"></el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-else>
                            <el-col :span="12">Model：</el-col>
                            <el-col :span="12">Example：</el-col>
                            <el-col :span="12">
                                <el-input type="textarea" :autosize="{ maxRows: 10 }" :value="getModel(props.row.schema)"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input type="textarea" :autosize="{ maxRows: 10 }" :value="getExample(props.row.schema, path['x-response-example'])"></el-input>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>

<script>
  export default {
    name: "responses",
    props: ['path'],
    inject: [
      'rowKey',
      'expandClass',
      'formatRequired',
      'formatDataType',
      'getModel',
      'getExample'
    ]
  }
</script>

<style scoped>

</style>